<template>
  <div id="map" class="map-container"></div>
</template>

<script>
import { loadModules } from 'esri-loader'
import { manyGraphics } from '@/utils/arcgisUtils'

export default {
  name: 'ArcGisMap',
  props: {
    // 选择加载地图自定义组件 ['switch-map', 'full-screen']
    tools: {
      type: Array,
      default: () => []
    },
    // 图形数据
    graphicsData: {
      type: Array,
      default: () => []
    },
    // 地图初始中心点
    centerPoint: {
      type: Array,
      default: () => [0, 0]
    },
    // 初始底图
    defaultBaseMap: {
      type: String,
      default: 'osm'
    },
    // 初始缩放级别
    zoom: {
      type: Number,
      default: 12
    }
  },
  data () {
    return {
      view: null,
      // 用于切换底图ID的数组
      baseMaps: ['osm', 'satellite', 'terrain']
    }
  },
  mounted () {
    const { defaultBaseMap, centerPoint, zoom, graphicsData } = this
    loadModules(
      ['esri/Map', 'esri/views/MapView', 'esri/Graphic'],
      { css: true }
    )
      .then(
        ([ArcGISMap, MapView, Graphic]) => {
          const map = new ArcGISMap({
            basemap: defaultBaseMap
          })

          this.view = new MapView({
            container: document.getElementById('map'),
            map: map,
            center: centerPoint,
            zoom: zoom
          })

          // 将图形添加到视图的图形层
          graphicsData.length && this.view.graphics.addMany(manyGraphics(Graphic, graphicsData))

          // 绑定点击事件
          this.view.on('click', e => {
            this.view.hitTest(e)
              .then(res => {
                // 获取每个图形上的ID
                res.results.length && this.$emit('clickGraphic', res.results[0].graphic.attributes)
              })
          })

          // 添加自定义控件
          this.tools.includes('switch-map') && this.view.ui.add(this.switchMapBtn(map), 'top-left')
          this.tools.includes('full-screen') && this.view.ui.add(this.fullScreenBtn(), 'top-left')
        }
      )
  },
  methods: {
    // 地图切换按钮
    switchMapBtn (map) {
      const btn = document.createElement('img')
      btn.src = require('./icons/switch-map.jpg')
      btn.style.width = '32px'
      btn.style.height = '32px'
      btn.style.cursor = 'pointer'
      btn.onclick = () => {
        let index = this.baseMaps.indexOf(map.basemap.id)
        map.basemap = index < this.baseMaps.length - 1 ? this.baseMaps[++index] : this.baseMaps[0]
      }
      return btn
    },
    // 地图全屏按钮
    fullScreenBtn () {
      const btn = document.createElement('div')
      btn.id = 'full-screen-btn'
      btn.style.width = '32px'
      btn.style.height = '32px'
      btn.style.cursor = 'pointer'
      btn.onclick = function () {
        const mapContainer = document.getElementById('map')
        const _body = document.body
        this.classList.toggle('full-screen')
        mapContainer.classList.toggle('full-screen')
        mapContainer.classList.contains('full-screen') ? (_body.style.overflow = 'hidden') : (_body.style.overflow = '')
      }
      return btn
    }
  },
  beforeDestroy () {
    this.view && (this.view.container = null)
  }
}
</script>

<style scoped lang="less">
.map-container {
  width: 100%;
  height: 100%;
  background: #f5f5f5;

  &.full-screen {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 1;
  }

  /deep/ #full-screen-btn {
    background: #fff url('./icons/full-screen.svg') no-repeat center center / 100% 100%;

    &.full-screen {
      background-image: url('./icons/normal-screen.svg');
    }
  }
}

</style>
